<template>
    <div>
        <span v-html="real_title"></span>
        <span :class="{'clickable':value_click_event != undefined}" :style="styleObject" @click="click">
            {{value}}
        </span>
    </div>
</template>

<script>
    export default {
        props: {
            title: String,
            value: String,
            offset: Number,
            value_click_event: {
                type: Function,
                default: undefined
            },
        },
        data() {
            return {
                styleObject: {
                    'margin-left': this.offset + 'px',
                }
            }
        },
        computed: {
            real_title: function () {
                let t_title = this.title;
                t_title += ':';
                return t_title;
            }
        },
        methods: {
            click() {
                if (this.value_click_event != undefined) {
                    this.value_click_event();
                }
            }
        }
    }
</script>

<style scoped>
    .clickable {
        color: #62A8CB;
        cursor: pointer;
    }
</style>